<template>
  <div>
    <van-search
      shape="round"
      show-action
      label="JD"
      class="search"
      placeholder="请输入搜索关键词"
      background="linear-gradient(to right, orange, red)"
      @click="goSearch"
    >
      <template #left>
        <div class="while">
          <select name="" id="" class="while">
            <option value="" v-for='(i,index) in list' :key="index">{{i.name}}</option>
          </select>
        </div>
      </template>
      <template #action>
        <div class="while" @click="gologin">登录</div>
      </template>
    </van-search>
  </div>
</template>

<script>
import { getCity } from "@/api/city";
export default {
  data() {
    return {
      list: [],
    };
  },
  methods: {
    gologin() {
      this.$router.push("/Login");
    },
    goSearch(){
      this.$router.push("/Search")
    }
  },
  created() {
    getCity().then((res) => {
      console.log(res,"city");
      this.list = res.data;
      console.log(this.list);
    })
  },
};
</script>

<style scoped>
.while {
  color: white;
  font-size: 1rem;
  padding-right: 0.25rem;
}
select {
  outline: none;
  border: none;
  color: #333;
  font-size: 16px;
  background-color: rgba(255, 192, 203, 0);
}
option {
  font-size: 12px;
  font-weight: 700;
  background-color: pink;
}
</style>